<%@ page contentType="text/html;charset=UTF-8" language="java"  import="java.util.*" trimDirectiveWhitespaces="true" %>
<%@include file="/WEB-INF/pages/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>网站日志统计</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <%@include file="/WEB-INF/pages/common/commonCss.jsp"%>
  <link rel="stylesheet" href="${basePath}/resources/css/uniform.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/select2.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/matrix-style.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/matrix-media.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/admin/list.css" />
  <script type="text/javascript" src="${basePath}/resources/js/date/WdatePicker.js"></script>

</head>

<body>

<!--Header-part-->
<%@include file="/WEB-INF/pages/common/head.jsp"%>


<!--sidebar-menu-->
<%@include file="/WEB-INF/pages/common/left.jsp"%>

<div id="content">
  <div id="content-header">
    <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 首页</a> <a href="#" class="current">Tables</a> </div>
    <h1>日志管理</h1>
  </div>

  <div class="container-fluid">

    <hr>

    <div class="row-fluid">
      <div class="span12">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
            <h5>选择时间</h5>
            <div style="padding:0.2rem;">
              <input type="text"  id="date" onFocus="WdatePicker({onpicking:changeDate})" class="Wdate"/>
            </div>
          </div>
          <div class="widget-content">
            <div id="main" style="height: 400px;"></div>
            <p>
              <input id="updateInterval" type="hidden" value=""  style="text-align: right; width:5em">
              </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

   <!--Footer-part-->
<%@include file="/WEB-INF/pages/common/footer.jsp"%>

<!--end-Footer-part-->

<%@include file="/WEB-INF/pages/common/commonJS.jsp"%>
   <script src="${basePath}/resources/js/jquery.ui.custom.js"></script>
<script src="${basePath}/resources/js/bootstrap.min.js"></script>
<script src="${basePath}/resources/js/jquery.uniform.js"></script>
<script src="${basePath}/resources/js/select2.min.js"></script>
<script src="${basePath}/resources/js/jquery.dataTables.min.js"></script>
<script src="${basePath}/resources/js/matrix.js"></script>
<script src="${basePath}/resources/js/echart/echarts.js"></script>

<%--<script src="${basePath}/resources/js/matrix.tables.js"></script>--%>

   <script>

     $(function(){
       var d = new Date().format('yyyy-MM-dd');
       loadData(d);
       $("#date").val(d);
     });

     function loadData(date){
       tzAjax.request({
         path:adminPath,
         model:"adminstat",
         method:"groupusers",
         params:"username=keke&password=123456",
// 				before:function(){
// 					loading("请稍后，数据加载中...");
// 				},
// 				error:function(){
// 					loading("请求出错...",4);
// 				},
// 				logout:function(){
// 					//记录用户退出的时间和记录，写入到数据库中....
// 				},
         success:function(data){
           var json = {
             title:date+"年度xx网站模块访问详情",
             datas:parseData(data),
             timeLines:getTimeLine()
           };
           initChart("main",json);
         }
       },{"date":date});
     };

     // 点击日期的回调函数
     function changeDate(dp){
       var date = dp.cal.getNewDateStr();
       loadData(date);
     }


     function parseData(jsonArr){
       var jsonObj = {};
       for(var key in jsonArr){
         var num = jsonArr[key].num;
         var m = jsonArr[key].h;
         jsonObj["s"+parseInt(m)]= num;
       };
       var arr = [];
       for(var i=0;i<=23;i++){
         arr.push(jsonObj["s"+i]||0);
       }
       return arr;
     }

     //时间轴准备
     function getTimeLine(){
       var arr = [];
       for(var i=0;i<=23;i++){
         arr.push((i<10?"0"+i:i)+":00");
       }
       return arr;
     };

     function initChart(targetId,json){
       require.config({
         paths: {
           echarts: basePath+'/resources/js/echart'
         }
       });
       require(
               [
                 'echarts',
                 'echarts/chart/bar',
                 'echarts/chart/pie',
                 'echarts/chart/line'
               ],
               function (ec) {
                 var myChart = ec.init(document.getElementById(targetId));
                 var option = {
                   title : {
                     x:"center",
                     text: json.title,
                     subtext: '时间/注册数'
                   },
                   tooltip : {
                     trigger: 'axis'
                   },
                   //                	    legend: {
                   //                	        data:['意向','预购','成交']
                   //                	    },
                   toolbox: {
                     show : true,
                     feature : {
                       mark : {show: true},
                       dataView : {show: true, readOnly: false},
                       magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                       restore : {show: true},
                       saveAsImage : {show: true}
                     }
                   },
                   calculable : true,
                   xAxis : [
                     {
                       name:"时间段",
                       type : 'category',
                       data :json.timeLines
                     }
                   ],
                   yAxis : [
                     {
                       name:"注册数",
                       type : 'value'
                     }
                   ],
                   series : [
                     {
                       name:'成交',
                       type:'line',
                       smooth:true,
                       //显示纵坐标所有数值
                       /*itemStyle: {
                        normal:{
                        label:{
                        show: true,
                        formatter: '{c}'
                        },
                        labelLine :{show:true}
                        }
                        },*/

                       markPoint : {
                         data : [
                           {type : 'max', name: '最大值'},
                           {type : 'min', name: '最小值'}
                         ]
                       },
                       markLine : {
                         data : [
                           {type : 'average', name: '平均值'}
                         ]
                       },
                       data:json.datas
                     }
                   ]
                 };

                 myChart.setOption(option);
                 var ecConfig = require('echarts/config');
                 myChart.on(ecConfig.EVENT.CLICK, eConsole);
               }
       );
     }


     function eConsole(param) {
     };

   </script>

</body>
</html>
